<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.css'><link rel="stylesheet" href="./style.css">
    <title>Blog顶置卡片设计</title>
</head>
<body>
<!-- 卡片设计 -->
<div class="blog-slider">
    <div class="blog-slider_wrp swiper-wrapper">

        <div class="blog-slider_item swiper-slide">
            <div class="blog-slider_img">
                <img src="https://source.unsplash.com/LJ9KY8pIH3E" alt="">
            </div>
            <div class="blog-slider_content">
                <span class="blog-slider_code">21 February 2021</span>
                <div class="blog-slider_title">Paperiza</div>
                <div class="blog-slider_text">A beautiful and minimal wallpaper app! Change your desktop wallpaper automatically with beautiful images from Unsplash, Pixabay and Pexels.</div>
                <a href="#" class="blog-slider_button">READ ME</a>
            </div>
        </div>

        <!-- 相同的格式，复制了两次，修改自己需要的内容 -->
        <div class="blog-slider_item swiper-slide">
            <div class="blog-slider_img">
              <img src="https://source.unsplash.com/MJ9px5L-opg" alt="">
            </div>
            <div class="blog-slider_content">
              <span class="blog-slider_code">21 February 2021</span>
              <div class="blog-slider_title">Welcome to AMD</div>
              <div class="blog-slider_text">High frame rates mean high win rates on a laptop powered by the world’s best mobile processor for gamers.</div>
              <a href="#" class="blog-slider_button">READ MORE</a>
            </div>
        </div>
          
        <div class="blog-slider_item swiper-slide">
            <div class="blog-slider_img">
              <img src="https://source.unsplash.com/2EJCSULRwC8" alt="">
            </div>
            <div class="blog-slider_content">
              <span class="blog-slider_code">21 February 2021</span>
              <div class="blog-slider_title">Artificial Intelligence</div>
              <div class="blog-slider_text">AI will change the way we do business and, ultimately, change our lives. It offers your organisation personalization, prediction and security as never before.</div>
              <a href="#" class="blog-slider_button">READ MORE</a>
            </div>
        </div>

    </div>
    <div class="blog-slider_pagination"></div>
</div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/6.4.15/swiper-bundle.min.js'></script><script src="./script.js"></script>
</body>
</html>